import React from 'react';
import {Text} from "react-native";
import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
import {IconProps} from "@/components/k-view/icon/type";


const MyText = React.forwardRef(
    (props: IconProps, ref: React.LegacyRef<Text>) => {
        const {
            color = '#333',
            size = 14,
            style
        } = props;
        return <Text
            ref={ref}
            {...props}
            style={[style, {
                fontFamily: "iconfont",
                color,
                fontSize: size,
            }]}
        >{props.name}</Text>;
    }
);

const AnimatedIcon = Animated.createAnimatedComponent(MyText);


const Icon = (props: IconProps) => {
    const {isRotate} = props;
    const rotateNum = 180;
    const rotation = useSharedValue(isRotate ? rotateNum : 0);
    const animatedStyle = useAnimatedStyle(() => {
        return {
            transform: [{rotateZ: `${rotation.value}deg`}],
        };
    });
    React.useEffect(() => {
        rotation.value = withTiming(props.isRotate ? rotateNum : 0, {duration: 300});
    }, [isRotate]);

    return (
        <AnimatedIcon {...props} style={animatedStyle}/>
    );
};

export default Icon;